<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>借阅历史</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/modules/layer/default/layer.css">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/layer/layer.js"></script>
    <script src="${pageContext.request.contextPath}/static/laydate/laydate.js"></script>
    <script src="${pageContext.request.contextPath}/static/layui/xm-select.js"></script>
    <style>
        *{
            padding: 0px;
        }
        .layui-table-cell{
            text-align:center;
            height: auto;
            white-space: normal;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend><span style="font-size: xx-large;font-weight: bold;"> 借阅历史</span></legend>
</fieldset>
<div class="layui-container">
    <div style="margin-top: 7vh;">
        <form class="layui-form" action="">
            <div class="layui-row layui-col-space30">
                <div class="layui-col-md3">
                    <input class="layui-input" name="" id="search-username" autocomplete="off"  placeholder="请输入用户名">
                </div>
                <div class="layui-col-md3">
                    <input class="layui-input" name="" id="search-userId" autocomplete="off"  placeholder="请输入账号">
                </div>
                <div class="layui-col-md3">
                    <input class="layui-input" name="" id="search-title" autocomplete="off"  placeholder="请输入书名">
                </div>
                <div class="layui-col-md3">
                    <input type="text" class="layui-input" id="search-date" placeholder="完成借阅时间范围">
                </div>

            </div>
            <div class="layui-row">
                <div class="layui-col-md3 layui-col-md-offset9">
                    <button id="searchBtn" class="layui-btn" type="button" lay-filter="formDemo">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>

            </div>
        </form>
    </div>
    <div class="layui-row">
        <table class="layui-hide" id="borrowHistoryTable" lay-skin="line"  lay-filter="borrowHistoryTable">
        </table>
    </div>
</div>

<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<script>
    layui.use(['table','element','laydate'], function(){
        var table = layui.table;
        var element = layui.element;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#search-date'
            ,range: true
        });

        $("#searchBtn").click(function (){
            console.log($("#search-date").val().split(" - ")[0]);
            console.log($("#search-date").val().split(" - ")[1]);
            reload();
        })

        var tableIns = table.render({
            elem: '#borrowHistoryTable'
            ,url:'${pageContext.request.contextPath}/borrow/getBorrowHistoryByCondition.do'
            ,where: {
                "username": $('#search-username').val(),
                "userId": $('#search-userId').val(),
                "title": $('#search-title').val(),
                "startDate": $("#search-date").val().split(" - ")[0],
                "endDate": $("#search-date").val().split(" - ")[1]==null?$("#search-date").val().split(" - ")[1]:""
            }
            ,page: true
            ,limits: [5,10,20]
            ,limit: 10
            ,parseData: function(res){
                var result;
                if(this.page.curr){
                    result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                }
                else{
                    result=res.data.slice(0,this.limit);
                }
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.count,
                    "data": result
                };
            }
            ,initSort: {
                field: 'status'
                ,type: 'asc'
            }
            ,cols: [[
                ,{field:'id',title: 'ID',hide: true}
                ,{field:'userId',title: 'ID',hide: true}
                ,{field:'account', title: '账号'}
                ,{field:'bookId',title: 'ID',hide: true}
                ,{field:'title', title: '书籍名'}
                ,{field:'borrowDate', title: '借书日期'}
                ,{field:'returnDate', title: '还书日期'}
                ,{field:'status',title: '状态'}
                ,{field:'cz',title: '操作', toolbar: '#bar'}
            ]]
            ,done: function (res, curr, count) {
                $(".layui-table-header  tr").resize(function () {
                    $(".layui-table-header  tr").each(function (index, val) {
                        $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                    });
                });
                //初始化高度，使得冻结行表头高度一致
                $(".layui-table-header  tr").each(function (index, val) {
                    $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                });
                //动态监听表体高度变化，冻结行跟着改变高度
                $(".layui-table-body  tr").resize(function () {
                    $(".layui-table-body  tr").each(function (index, val) {
                        $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                    });
                });
                //初始化高度，使得冻结行表体高度一致
                $(".layui-table-body  tr").each(function (index, val) {
                    $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                });
                element.render()
            }
        });

        table.on('tool(borrowHistoryTable)', function(obj){
            var data = obj.data;
            switch(obj.event){
                case 'delete':
                    layer.confirm('真的删除么', function(index){
                        $.ajax({
                            url:"${pageContext.request.contextPath}/borrow/deleteBorrowHistoryById.do",
                            data:{
                                "id" : data.id
                            },
                            type:"post",
                            dataType:"json",
                            success:function (n){
                                if(n.success){
                                    reload();
                                }else {
                                    layer.msg("删除失败");
                                }
                            }
                        });
                        layer.close(index);
                    });
                    break;
            };
        });
        function reload(){
            tableIns.reload({
                where: {
                    "username": $('#search-username').val(),
                    "userId": $('#search-userId').val(),
                    "title": $('#search-title').val(),
                    "startDate": $('#search-date').val().split(" - ")[0],
                    "endDate": $("#search-date").val().split(" - ")[1]==null?$("#search-date").val().split(" - ")[1]:""
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        }
    });
</script>
</body>
</html>